import React, { Component } from 'react';

import './Parent.css';
import { Child, Child2 } from './Child';

// 父组件
export class Parent extends Component {
  // 父组件数据
  state = {
    list: [
      {
        id: 1,
        name: '超级好吃的棒棒糖',
        price: 18.8,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 2,
        name: '超级好吃的大鸡腿',
        price: 34.2,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 3,
        name: '超级无敌的冰激凌',
        price: 14.2,
        info: '开业大酬宾，全场8折',
      },
    ],
  };

  // 父组件定义一个函数
  kan = (id, unit) => {
    console.log(id, unit);
    const newList = this.state.list.map((item) => {
      if (item.id === id) {
        return {
          ...item,
          price: parseFloat(item.price - unit).toFixed(2),
        };
      }
      return item;
    });
    // 触发更新
    this.setState({
      list: newList,
    });
  };

  render() {
    console.log('父', this.props);
    return (
      // 父组件
      <div className="parent">
        <h1>父组件</h1>
        {/* 把下面UI抽离为子组件 */}
        {this.state.list.map((item) => (
          // <Child key={item.id} item={item} />
          // 第二种
          // <Child
          //   key={item.id}
          //   name={item.name}
          //   price={item.price}
          //   info={item.info}
          // />
          // <组件 {...obj}> 是上面第二种写法快捷方式
          <Child key={item.id} {...item} kan={this.kan} />
        ))}
      </div>
    );
  }
}
